<template>
  <div class="container releaseGoods">
    <!-- <div class="step"> -->
    <div class="releaseGoods-logo">
      <div class="weui-uploader__files" id="uploaderFiles" v-if="goods_logo">
        <block>
          <div class="weui-uploader__file posi-rela" @click="predivImage" :id="goods_logo">
            <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('goods_logo')" />
            <image class="weui-uploader__img" :src="goods_logo" mode="aspectFill" />
          </div>
        </block>
      </div>
      <div class="weui-uploader__input-box" v-if="!goods_logo">
        <span>商品主图</span>
        <div class="weui-uploader__input" @click="chooseImage($event,'goods_logo')">
        </div>
      </div>
    </div>
    <i-panel>
      <i-input :value="user_name" title="商品标题" @change="change($event,'user_name')" placeholder="请输入姓名" />
      <i-cell is-link i-class="select-city-cell">
        <picker mode="multiSelector" @change="changePicker" @columnchange="changeColumnPicker" :value="classIndex"
          range-key="cate_title" :range="classArray" class="select-city">
          <i-input :value="classInfo" title="分类" disabled="disabled" placeholder="请选择商品分类" i-class="" />
        </picker>
      </i-cell>
      <i-input :value="user_name" title="品牌" @change="change($event,'user_name')" placeholder="请输入品牌" />
      <i-input :value="user_name" title="货号" @change="change($event,'user_name')" placeholder="请输入货号" />
      <div class="i-cell i-input cell">
        <div class="i-cell-hd i-input-title">商品详情</div>
        <div class="i-cell-bd">
          <div class="weui-uploader__files" id="uploaderFiles" v-if="identity_cert_just">
            <block>
              <div class="weui-uploader__file posi-rela" @click="predivImage" :id="identity_cert_just">
                <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('identity_cert_just')" />
                <image class="weui-uploader__img" :src="identity_cert_just" mode="aspectFill" />
              </div>
            </block>
          </div>
          <div class="weui-uploader__input-box" v-if="!identity_cert_just">
            <div class="weui-uploader__input" @click="chooseImage($event,'identity_cert_just')"></div>
          </div>
        </div>
      </div>
    </i-panel>
    <button type="button" class="sub-btn">下一步</button>
    <i-toast id="toast" />
  </div>
</template>
<script>
  // item[12_17][price]:101.00， item[12_17][store_count]:99， item[12_17][key_name]:颜色:黑色 尺寸:120*80，

  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import request from "@/api/request";
  import {
    getMallList,
    path
  } from '@/utils/index'
  export default {
    components: {},

    data() {
      return {
        identity_cert_back: null,
        goods_logo: null,
        classInfo: null,
        classIndex: [0, 0],
        classArray: [
          [],
          []
        ]
      };
    },
    computed: {
      ...mapState(['mallList', 'changeAddress'])
    },
    methods: {
      getStoreClass(value) {

      },
      handlerSelectTag(value) {
        if (this.store_label[value]) {
          this.$set(this.store_label, value, null)
          delete this.store_label[value]
        } else {
          this.$set(this.store_label, value, value)
        }
      },

      chooseImage(e, target) {
        let _this = this
        wx.chooseImage({
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success(res) {
            console.log(res)
            console.log(res.tempFilePaths)
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            console.log(_this[target], target)
            _this[target] = res.tempFilePaths[0];
            wx.uploadFile({ //上传到服务器
              url: `${path}common/upload-photo`, //仅为示例，非真实的接口地址
              filePath: res.tempFilePaths[0], //文件地址
              name: 'file', //文件name值
              success: function (uploadFile) {
                console.log(JSON.parse(uploadFile.data))
                _this[target] = JSON.parse(uploadFile.data).data.url;
              },
              fail(e) {
                console.log(e);
              },
            })
          },
          fail() {
            console.log("fail");
          },
          complete() {
            console.log("commplete");
          }
        });
      },
      predivImage(e) {
        console.log(e);
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: this.screen_pic // 需要预览的图片http链接列表
        });
      },
      deletImg(target) {
        this[target] = '';
      },
      changePicker(e) {
        const {
          value
        } = e.mp.detail
        this.classId = this.classArray[1][value[1]].id
        this.classInfo = `${this.classArray[0][value[0]].cate_title}/${this.classArray[1][value[1]].cate_title}`
        this.getGoodsInfos()
      },
      changeColumnPicker(e) {
        const {
          column,
          value
        } = e.mp.detail
        if (column == 0) {
          this.$set(this.classArray, 1, this.classArray[column][value]._child)
        }
        this.$set(this.classIndex, column, value)
      },
      getGoodsInfos() {
        request.getGoodsInfos({
          cate_id: this.classId
        }).then(res => {
          console.log(res)
        })
      },
      setGoodsClass() {
        let goods_cates = this.mallList.goods_cates
        let ary = [
          [],
          []
        ]
        goods_cates.map((item, index) => {
          ary[0].push(item)
        })
        ary[1] = ary[0][0]._child
        this.classArray = ary
        console.log(ary)
      }
    },
    mounted() {
      console.log(this.mallList.goods_cates)
      this.setGoodsClass()
    }
  };

</script>

<style lang="less">
  .i-swipeout-item {
    margin-top: 10px;
    border-bottom: 0 !important;
  }

  .i-swipeout-button {
    height: 58px;
    width: 64px;
    text-align: center;
    line-height: 58px;
    color: #fff;
  }

  .i-swipeout-button-group {
    background: #ee7559;
    width: 64px;
    height: 58px;
  }

  .address {
    padding-bottom: 49px;

  }

  .address-controller {
    margin-top: 30px;
  }

  .address-edit {
    width: 38px;
    height: 38px;
  }

  .add-address {
    height: 49px;
    background: #fff;
    line-height: 49px;
    font-size: 15px;
    color: rgba(238, 117, 89, 1);
    text-align: center;
    margin-top: 14px;

  }

  .address {
    .select-city-cell {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .select-city {
    margin: 0 -15px;
  }

  .no-border {
    border: 0;

    &:after {
      display: none;
    }
  }

  .cell {
    width: 100%;
    display: flex;
    background: #fff;
  }

  .i-cell {
    position: relative;
    padding: 12px 15px;
    display: flex;
    background: #fff;
    line-height: 1.4;
    font-size: 14px;
    overflow: hidden;
  }

  .i-cell::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 0 solid #e9eaec;
    border-bottom-width: 1rpx;
    left: 0;
    right: 0
  }

  .i-cell::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 0 solid red;
    border-bottom-width: 1px;
    left: 0;
    right: 0
  }

  .i-cell-last::after {
    display: none
  }

  .i-cell-icon {
    margin-right: 5px
  }

  .i-cell-icon:empty {
    display: none
  }

  .i-cell-bd {
    flex: 1;
    flex: 1;
    line-height: 1.6;
    min-height: 22PX;
    height: auto;
    font-size: 14px;


  }

  .i-cell-text {
    line-height: 24px;
    font-size: 14px
  }

  .i-cell-desc {
    line-height: 1.2;
    font-size: 12px;
    color: #80848f
  }

  .i-cell-ft {
    position: relative;
    text-align: right;
    color: #495060
  }

  .i-cell-access .i-cell-ft {
    padding-right: 13px
  }

  .i-cell-access .i-cell-ft::after {
    content: " ";
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 2px;
    border-width: 2px 2px 0 0;
    border-color: #dddee1;
    border-style: solid;
    transform: translateY(-50%) matrix(.71, .71, -.71, .71, 0, 0)
  }

  .i-input {
    padding: 7px 15px;
    color: #495060
  }

  .i-input-wrapped {
    margin: 10px 15px;
    background-color: #fff
  }

  .i-input-wrapped::after {
    left: 0;
    border-width: 1px;
    border-radius: 4px
  }

  .i-input-error {
    color: #ed3f14
  }

  .i-input-title {
    color: #495060;
    min-width: 70PX;
    padding: 4PX 0;
    padding-right: 10PX;
    box-sizing: content-box
  }

  .i-input-input {
    flex: 1;
    line-height: 1.6;
    padding: 4px 0;
    min-height: 22px;
    height: auto;
    font-size: 14px
  }

  .i-input-placeholder {
    font-size: 14px
  }

  .i-input-input-right {
    text-align: right
  }

  .i-input.i-input-wrapped::after {
    display: block
  }

  .i-input-wrapped.i-input-error::after {
    border-color: #ed3f14
  }

  .select-city-cell {}

  .th-icon-cancel {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    right: -14rpx;
    top: -14rpx;
  }

  .weui-uploader__file {
    position: relative
  }

  .sendCode {
    height: 32px;
    background: #ee7559;
    color: #fff;
    border: 0;
    line-height: 32px;
    font-size: 14px;
    border-radius: 16px;
  }

  .sub-btn {
    border-radius: 22px;
    margin: 20px 15px;
    height: 44px;
    background: #ee7559;
    color: #fff;
    border: 0;
    line-height: 44px;
    font-size: 14px;
  }

  .entering-banner {

    img {
      display: block;
      width: 100%;
    }
  }

  .tagsList {
    display: flex;
    flex-wrap: wrap;

    .tag {
      margin-top: 2px;
      padding: 5px 8px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 10px;
      margin-bottom: 3px;
      background: #fff;
      color: #333333;
      border-radius: 5px;
      border: 1px solid #DADADA;
      font-size: 12px;
      color: rgba(96, 96, 96, 1);
      line-height: 1em;

      &.active {
        border-color: #EE7559;
        color: #EE7559;
      }

    }
  }


  // 

  .releaseGoods-logo {
    display: flex;
    justify-content: center;
    padding: 24px;
    background: #fff;

    .weui-uploader__input-box {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F9F9F9;

      &:after {
        display: none;
      }

      &::before {
        display: none;
      }

      span {
        font-size: 12px;
        color: #D1D1D1;
        line-height: 1em;
      }

      .weui-uploader__input {}
    }
  }

</style>
